<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                    template="./userTemplate/UserTemplate.xhtml">

        <ui:define name="content">
            <div class="col2">
                <h2 class="colr heading"><cufon class="cufon cufon-canvas" alt="Recent " style="width: 80px; height: 20px;"><canvas width="94" height="21" style="width: 94px; height: 21px; top: 0px; left: -1px;"></canvas><cufontext>Recent </cufontext></cufon><cufon class="cufon cufon-canvas" alt="Products" style="width: 89px; height: 20px;"><canvas width="101" height="21" style="width: 101px; height: 21px; top: 0px; left: -1px;"></canvas><cufontext>Products</cufontext></cufon></h2>
                <!-- Product Detail -->
                <div class="prod_detail">
                    <div class="gallery_sec">
                        <div class="gallery_cont" id="slider2">
                            <div class="contentdiv" style="display: block; z-index: 1; opacity: 1; visibility: visible;">
                                <a title="section1" href="./ImgCar/AudiA5_1.jpg" rel="example_group"><img width="333" height="350" alt="" src="./ImgCar/AudiA5_1.jpg"/></a>
                            </div>
                            <div class="contentdiv" style="display: none;">
                                <a title="section2" href="ImgCar/lightbox.jpg" rel="example_group"><img alt="" src="ImgCar/Audi-A5(2).jpg"/></a>
                            </div>
                            <div class="contentdiv" style="display: none;">
                                <a title="section3" href="ImgCar/lightbox.jpg" rel="example_group"><img alt="" src="ImgCar/Audi-A5(3).jpg"/></a>
                            </div>
                            <div class="contentdiv" style="display: none;">
                                <a title="section4" href="ImgCar/lightbox.jpg" rel="example_group"><img alt="" src="ImgCar/Audi-A5(4).jpg"/></a>
                            </div>
                            <div class="contentdiv" style="display: none;">
                                <a title="section5" href="ImgCar/lightbox.jpg" rel="example_group"><img alt="" src="ImgCar/Audi-A5(5).jpg"/></a>
                            </div>
                            <div class="contentdiv" style="display: none;">
                                <a title="section6" href="ImgCar/lightbox.jpg" rel="example_group"><img alt="" src="ImgCar/Audi-A5(6).jpg"/></a>
                            </div>
                            <div class="contentdiv" style="display: none;">
                                <a title="section7" href="ImgCar/lightbox.jpg" rel="example_group"><img alt="" src="ImgCar/Audi-A5(7).jpg"/></a>
                            </div>
                        </div>
                        <div class="scrollingunit">
                            <a class="prevgallery" href="#">&nbsp;</a>
                            <div id="paginate-slider2" class="anyClass" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 210px;">
                                <ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 490px; left: 0px;">
                                    <li style="overflow: hidden; float: left; width: 56px; height: 56px;"><a class="toc selected" href="#" rel="1"><img alt="" src="./ImgCar/Audi.jpg"/></a></li>
                                    <li style="overflow: hidden; float: left; width: 56px; height: 56px;"><a class="toc" href="#" rel="2"><img width="158" height="184" alt="" src="./ImgCar/Audi.jpg"/></a></li>
                                    <li style="overflow: hidden; float: left; width: 56px; height: 56px;"><a class="toc" href="#" rel="3"><img width="158" height="184" alt="" src="./ImgCar/AudiA5_1.jpg"/></a></li>
                                    <li style="overflow: hidden; float: left; width: 56px; height: 56px;"><a class="toc" href="#" rel="4"><img width="158" height="184" alt="" src="./ImgCar/AudiA5_2.jpg"/></a></li>
                                    <li style="overflow: hidden; float: left; width: 56px; height: 56px;"><a class="toc" href="#" rel="5"><img width="158" height="184" alt="" src="./ImgCar/AudiA6_1.jpg"/></a></li>
                                </ul>
                            </div>
                            <a class="nextgallery" href="#">&nbsp;</a>
                        </div>
                        <script src="js/contentslider.js" type="text/javascript"></script>
                        <script src="js/gallery.js" type="text/javascript"></script>
                        <script src="js/jcarousellite_1.0.1.js" type="text/javascript"></script>
                        <script src="js/gallery_scrol.js" type="text/javascript"></script>
                    </div>
                    <div class="detail_sec">
                        <div class="bigbutton">
                            <a class="prevprod" href="#">Previou Item</a>
                            <a class="nextprod" href="#">Next Item</a>
                        </div>
                        <div class="clear"></div>
                        <div class="heading">
                            <h2 class="colr"><cufon class="cufon cufon-canvas" alt="Maecenas " style="width: 116px; height: 20px;"><canvas width="130" height="21" style="width: 130px; height: 21px; top: 0px; left: -1px;"></canvas><cufontext>Maecenas </cufontext></cufon><cufon class="cufon cufon-canvas" alt="sagittis" style="width: 68px; height: 20px;"><canvas width="80" height="21" style="width: 80px; height: 21px; top: 0px; left: -1px;"></canvas><cufontext>sagittis</cufontext></cufon></h2>
                            <h6 class="price"><cufon class="cufon cufon-canvas" alt="Price: " style="width: 39px; height: 12px;"><canvas width="47" height="13" style="width: 47px; height: 13px; top: 0px; left: 0px;"></canvas><cufontext>Price: </cufontext></cufon><cufon class="cufon cufon-canvas" alt="$500.99" style="width: 47px; height: 12px;"><canvas width="52" height="13" style="width: 52px; height: 13px; top: 0px; left: 0px;"></canvas><cufontext>$500.99</cufontext></cufon></h6>
                        </div>
                        <p class="txt">
                                	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit. Nulla sem risus, vestibulum in, volutpat eget, dapibus ac, lectus. Curabitur dolor sapien, hendrerit non, suscipit bibendum, auctor ac, arcu. Vestibulum dapibus. Sed pede lacus, pretium in, condimentum sit amet, mollis dapibus, magna.  Ut bibendum dolor nec augue.
                        </p>
                        <ul class="detailform">
                            <li class="txt">Color *</li>
                            <li class="infield">
                                <select onchange="MM_jumpMenu('parent',this,0)" id="jumpMenu" name="jumpMenu">
                                    <option>Black</option>
                                    <option>Red</option>
                                    <option>Yellow</option>
                                </select>
                            </li>
                        </ul>
                        <ul class="detailform">
                            <li class="txt">Size *</li>
                            <li class="infield">
                                <select onchange="MM_jumpMenu('parent',this,0)" id="jumpMenu1" name="jumpMenu">
                                    <option>Large</option>
                                    <option>Medium</option>
                                    <option>Small</option>
                                </select>
                            </li>
                        </ul>
                        <div class="clear"></div>
                        <p class="expam">In this example:</p>
                        <ul class="point">
                            <li>Maecenas tincidunt quam non tortor placerat pellentesque</li>
                            <li>Integer et tellus at felis semper porttitor vel sit amet tortor.</li>
                            <li>Praesent ut felis eget leo dignissim ultricies.</li>
                            <li>Sed imperdiet justo id mauris venenatis in scelerisque erat</li>
                        </ul>
                        <div class="clear"></div>
                        <a class="buttonone" href="cart.html">Add to Cart</a>
                        <a class="buttonone" href="listing.html">Continue Shopping</a>
                    </div>
                </div>
                <div class="clear"></div>
                <br/>
                    <!-- Related Products -->
                    <div class="listings">
                        <h2 class="colr heading"><cufon class="cufon cufon-canvas" alt="Related " style="width: 86px; height: 20px;"><canvas width="100" height="21" style="width: 100px; height: 21px; top: 0px; left: -1px;"></canvas><cufontext>Related </cufontext></cufon><cufon class="cufon cufon-canvas" alt="Products" style="width: 89px; height: 20px;"><canvas width="101" height="21" style="width: 101px; height: 21px; top: 0px; left: -1px;"></canvas><cufontext>Products</cufontext></cufon></h2>
                        <ul>
                            <li>
                                <a class="title colr" href="productDetails.xhtml">Wooden Table</a>
                                <a class="thumb" href="productDetails.xhtml">
                                    <img width="158" height="184" alt="" src="./ImgCar/Audi.jpg"/>
                                </a>
                                <div class="prodbuttons">
                                    <p class="price bold">$969.5</p>
                                    <a class="cart upper" href="cart.html">Add to Cart</a>
                                </div>
                            </li>
                            <li>
                                <a class="title colr" href="productDetails.xhtml">Wooden Table</a>
                                <a class="thumb" href="productDetails.xhtml">
                                    <img  width="158" height="184"  alt="" src="./ImgCar/AudiA5_1.jpg"/>
                                </a>
                                <div class="prodbuttons">
                                    <p class="price bold">$969.5</p>
                                    <a class="cart upper" href="cart.html">Add to Cart</a>
                                </div>
                            </li>
                            <li>
                                <a class="title colr" href="productDetails.xhtml">Wooden Table</a>
                                <a class="thumb" href="#"><span class="hot">&nbsp;</span>
                                    <img  width="158" height="184"  alt="" src="./ImgCar/AudiA5_2.jpg"/>
                                </a>
                                <div class="prodbuttons">
                                    <p class="price bold">$969.5</p>
                                    <a class="cart upper" href="cart.html">Add to Cart</a>
                                </div>
                            </li>
                            <li class="last">
                                <a class="title colr" href="productDetails.xhtml">Wooden Table</a>
                                <a class="thumb" href="#"><span class="new">&nbsp;</span>
                                    <img  width="158" height="184"  alt="" src="./ImgCar/AudiA6_1.jpg"/>
                                </a>
                                <div class="prodbuttons">
                                    <p class="price bold">$969.5</p>
                                    <a class="cart upper" href="cart.html">Add to Cart</a>
                                </div>
                            </li>
                        </ul>
                    </div>
            </div>
        </ui:define>
    </ui:composition>
</html>